<template>
  <div class="container">
    <div v-if="isShow" class="main">
      <ActionBar
        :tableSeting="tableSeting"
        @search-click="handleSearchClick"
        @insert-click="handleInsertClick"
        @delete-click="handleDeleteClick"
      />
      <Table
        :tableData="tableData"
        :tableSeting="tableSeting"
        :loading="tableLoading"
        @selection-change="selectionChange"
        @form-design-click="handleFormDesignClick"
        @form-design-update="handleEditClick"
      />
      <el-pagination
        class="pagination"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        :current-page="pageNum"
        :total="total"
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
      ></el-pagination>
      <Diglog
        :title="title"
        :tableSeting="tableSeting"
        :data="form"
        :show.sync="dialogVisible"
        @success="addsuccess"
      />
    </div>
    <router-view v-else />
  </div>
</template>

<script>
import ActionBar from './components/ActionBar'
import Table from './components/Table'
import Diglog from './components/Diglog'
// import { loadingType } from '../../../common/js/constant'
import axios from 'axios'

export default {
  components: {
    ActionBar,
    Table,
    Diglog
  },
  data() {
    return {
      title: '',
      formName: '',
      dialogVisible: false,
      formDesignVisible: false,
      form: {},
      tableData: [],
      tableSeting: [],
      key: new Date().getTime()
    }
  },
  computed: {
    isShow() {
      const url = window.location.href
      const arr = url.split('/')
      return arr[arr.length - 2] === 'forms'
    }
  },
  mounted() {
    this.getFormList()
    this.getTable()
  },
  methods: {
    getFormList() {
      let formList = JSON.parse(localStorage.getItem('formList')) || []
      let table = []
      formList.forEach(res => {
        table.push({
          type: res.code,
          table: res.fromSeting
        })
      })
      console.log(table)
      localStorage.setItem('table', JSON.stringify(table))
    },
    getTable() {
      const arr = window.location.href.split('/')
      let formsType = arr[arr.length - 1]
      let table = JSON.parse(localStorage.getItem('table'))
      let tableSeting = table.find(el => el.type === formsType)
      if (tableSeting) {
        this.tableSeting = tableSeting.table
      }
      this.getSelectOption()
      for (let index = 0; index < 5; index++) {
        let obj = {}
        obj.id = index
        this.tableSeting.forEach(object => {
          obj[object['field']] = object.value || 1
        })
        this.tableData.push(obj)
      }
    },
    getSelectOption() {
      this.tableSeting.forEach(res => {
        if (res.type === 'select' && res.selectSet) {
          axios({
            method: 'get',
            url: res.selectSet.url
          }).then(data => {
            data.data.forEach(e => {
              e.label = e[res.selectSet.label]
              e.value = e[res.selectSet.value]
            })
            res.options = data.data
            res.required = false
            this.tableSeting = JSON.parse(JSON.stringify(this.tableSeting))
            this.key = new Date().getTime()
            console.log(this.tableSeting)
          })
        }
      })
    },
    // 处理搜索点击事件
    handleSearchClick(form) {
      this.formName = form.formName
      this.getFormList()
    },
    // 处理添加按钮点击事件
    handleInsertClick() {
      this.title = '添加表单'
      this.form = null
      this.dialogVisible = true
    },
    // 处理编辑按钮点击事件
    handleEditClick(item) {
      this.title = '编辑表单'
      // 深拷贝form防止引用传递
      this.form = JSON.parse(JSON.stringify(item))
      this.tableSeting.forEach(res => {
        res.value = item[res.field]
      })
      console.log(this.tableSeting)
      this.dialogVisible = true
    },
    // 处理删除按钮点击事件
    handleDeleteClick() {},
    // b保存成功
    addsuccess(data) {
      console.log(data)
      let index = this.tableData.findIndex(el => el.id === data.id)
      this.$set(this.tableData, index, data)
      console.log(this.tableData)

      this.dialogVisible = false
    },
    // 表单设计保存
    formDesign(data) {
      console.log(data)
      let index = this.formList.findIndex(el => el.id === data.id)
      this.$set(this.formList, index, data)
      localStorage.setItem('formList', JSON.stringify(this.formList))
    },
    // 处理表单设计点击
    handleFormDesignClick(value) {
      this.form = JSON.parse(JSON.stringify(value))
      this.formDesignVisible = true
    },
    // 处理pageSize改变事件
    handlePageSizeChange(value) {
      this.pageSize = value
      this.getFormList()
    },
    // 处理pageNum改变事件
    handlePageNumChange(value) {
      this.pageNum = value
      this.getFormList()
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 100%
  .main
    padding 20px
    box-sizing border-box
    .pagination
      margin-top 20px
      text-align right
</style>
